<template>
  <!-- 哈希值弹窗 -->
  <van-popup
    v-model:show="props.show"
    :style="{
      width: '80%',
      'background-color': 'transparent',
    }"
    zIndex="999999"
    teleport="body"
    @click-overlay="closePopup"
  >
    <div class="hash">
      <div class="hash-header">
        <div class="hash-title">{{ $t("lotteryMoney.jyhx") }}</div>
        <div class="items-center" style="justify-content: space-between">
          <div class="hash-value">{{ hashText }}</div>
          <img
            class="hash-copy"
            src="/image/lotterymoney/mybet-copy.svg"
            @click.stop="getCopy(hashText)"
          />
        </div>
      </div>
      <!-- 跳转链接 -->
      <div class="hash-footer" @click.stop="jumpPage">
        {{ $t("lotteryMoney.lsck") }}
      </div>
    </div>
    <!-- 关闭按钮 -->
    <img
      class="hash-close"
      src="/image/pledge/close.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="hashValuePopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { useClipboard } from "@vueuse/core";
import { BDC_blockchain_Host } from "@/config";

const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    show: boolean;
    hashText: any; // 哈希值
  }>(),
  {
    show: false,
    hashText: "",
  }
);

const emit = defineEmits(["update:show", "confirm"]);

onMounted(() => {});
onBeforeUnmount(() => {});

// 关闭弹窗
const closePopup = () => {
  // https://etherscan.io/tx/0xfcde0e9d888949df20e6c86b8cc4dd0456a3b30fd6f6a44d540d285375d54f00
  emit("update:show", false);
};

/**
 * @description: 获取剪贴板内容
 */
const getCopy = (val: string) => {
  if (!val) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast({
      message: t("mvp.other.bzcjtb"),
      "z-index": 9999999,
    });
  } else {
    copy(val);
    showToast({
      message: t("mvp.other.fzcg"),
      "z-index": 9999999,
    });
  }
};

const jumpPage = () => {
  bridge.defaultBrowserOpen(`${BDC_blockchain_Host}${props.hashText}`);
};
</script>
<style lang="scss" scoped>
.hash {
  background-color: #fff;
  border-radius: 12 * 2px;
  padding-bottom: 1 * 2px;
  &-header {
    padding: 30 * 2px 20 * 2px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }
  &-title {
    text-align: center;
    color: #141924;
    font-size: 14 * 2px;
    font-weight: 510;
    margin-bottom: 12 * 2px;
  }
  &-value {
    color: #999da7;
    font-size: 13 * 2px;
    margin-right: 10 * 2px;
    width: calc(100% - 20 * 2px);
    line-height: 20 * 2px;
    word-wrap: break-word;
  }
  &-copy {
    width: 20 * 2px;
    height: 20 * 2px;
  }
  &-footer {
    margin: 10 * 2px 15 * 2px;
    // background-color: #b0d1f4;
    background-color: #007bff;
    text-align: center;
    color: #fff;
    font-size: 15 * 2px;
    font-weight: 590;
    padding: 8 * 2px 0;
    border-radius: 6 * 2px;
  }
  &-close {
    position: relative;
    margin-top: 20 * 2px;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 30 * 2px;
    height: 30 * 2px;
  }
}
</style>
